<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美女时钟</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="main">
		<div id="imgdiv">
			<img id="img" src="images/girltime.png" width="630px">
			<ul style="font-size: 30px">
				<li>星期一</li>
				<li>21:23:02</li>
			</ul>
		</div>
		<div>
			<span>
				<label for="i0">御姐</label>
				<input type="radio" name="i" id="i0" checked="checked" value="images/girltime.png">
			</span>
			<span>
				<label for="i1">白富美</label>
				<input type="radio" name="i" id="i1" value="images/girltime1.jpg">
			</span>
			<span>
				<label for="i2">傻白甜</label>
				<input type="radio" name="i" id="i2" value="images/girltime.jpg">
			</span>
		</div>
		<div id="sytleattr">
			<label>图片:</label><input id="picUrl" style="width:480px" value="images/girltime.png">
			<label>X坐标:</label><input id="picX" type="number" value="0">
			<label>Y坐标: </label><input id="picY" type="number" value="0">
			<label>旋转: </label><input id="picTransform" type="number" value="0">
			<label>字体大小: </label><input id="picSize" type="number" value="18">
			<label>字体颜色: </label><input id="picColor" type="color" value="#fff">
			<label>字体粗细: </label>
			<select id="picWeight">
				<option value="lighter">细体</option>
				<option value="normal">正常</option>
				<option value="bold" selected="selected">粗体</option>
			</select>
		</div>
	</div>
</body>
<script type="text/javascript">
	var weeknames = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
	// 以数组形式返回所有 ul 元素html对象
	var uls = document.getElementsByTagName("ul");
	var ul = uls[0];

	function setTime(){
		// 创建时间
		var now = new Date();
		var weekindex = now.getDay(); // 0~6 ==>
		var weekname = weeknames[weekindex];
		var hours = now.getHours();
		var minutes = now.getMinutes();
		var seconds = now.getSeconds();
		var size = "style='font-size:" + getSize() + "'";
		var timeStr = 
			"<li " + size + ">"+weekname+"</li>"+
			"<li " + size + ">"+hours+":"+minutes+":"+seconds+"</li>"
		ul.innerHTML = timeStr;
	}
	// 动态获取字体大小
	function getSize(){
		return picSize.value + "px";
	}
	
	setTime();
	setInterval(setTime,1000);
	
	// 19:8:2  ==> 19:18:20
	// 时间 格式： 个位前面补0
	// 如何跳动: 上面的定义函数，定时调用

	// 动态添加事件监听器
	picX.onchange = function(){ // 匿名函数  ==》 匿名类
		ul.style.left = picX.value + "px";
	}
	
	picTransform.onchange = function(){ // 匿名函数  ==》 匿名类
		ul.style.transform = "rotate("+picTransform.value+"deg)";
	}
	
	picY.onchange = function(){ // 匿名函数  ==》 匿名类
		ul.style.top = picY.value + "px";
	}
	
	// 该方法待完善
	picSize.onchange = function(){ // 匿名函数  ==》 匿名类
		var lis = document.getElementsByTagName("li");
		// li 是块级作用域变量
		for( let li of lis) {
			li.style.fontSize = picSize.value + "px";
		}
	}
	
	// 扩展： 通过单选框选择图片
	var radios = document.getElementsByName("i");
	for( let radio of radios ){
		// onchange 用于监听 value 的变化， 单选框、多选框选中变化用 onclick
		radio.onclick = function(){
			// 获取事件对象 event 对象，可以只用从 window 获取
			// window.event ==》 当前事件对象   ==> event
			let r = event.srcElement; // 当前事件的目标元素对象 
			console.info(r.value);
			img.src = r.value;
			
			// 切换前， 保存当前的时钟位置和角度
			// 切换后， 读取之前保存的时钟位置和角度
			
			// 3三数组 ==》 对象
			
			
		}
	}
	
</script>









</html>